<template>
  <div>
    <nav-bar :title="navTitle"></nav-bar>
    <form action="/">
      <van-search
        :value="$store.state.search.searchVal"
        show-action
        placeholder="商品搜索"
        @input="onInput($event)"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <search-history-hot
      v-if="$store.state.search.showComponents == 'history'"
    ></search-history-hot>
    <search-helper-list
      v-if="$store.state.search.showComponents == 'helper'"
    ></search-helper-list>
    <search-goods-list
      v-if="$store.state.search.showComponents == 'goods'"
    ></search-goods-list>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import NavBar from "@/components/common/nav-bar";
import SearchHistoryHot from "./search-history-hot";
import SearchHelperList from "./search-helper-list";
import SearchGoodsList from "./search-goods-list";

export default {
  data() {
    return {
      navTitle: "搜索",
      searchVal: "",
    };
  },
  methods: {
    ...mapActions("search", ["asyncGetHistoryAndHot", "asyncGethelperList"]),
    onSearch() {},
    onCancel() {
      this.$store.commit("search/getInput", "");
      this.$router.go(-1);
    },
    onInput(e) {
      this.$store.commit("search/getInput", e);
      if (!e) {
        this.$store.commit("search/changeShow", "history");
      } else {
        this.$store.commit("search/changeShow", "helper");
      }
      this.asyncGethelperList();
    },
  },
  created() {
    this.$store.commit("search/getInput", "");
    this.$store.commit("search/changeShow", "history");
    this.asyncGetHistoryAndHot();
  },
  components: {
    "nav-bar": NavBar,
    "search-history-hot": SearchHistoryHot,
    "search-helper-list": SearchHelperList,
    "search-goods-list": SearchGoodsList,
  },
};
</script>

<style lang="scss" scoped>
</style>